<template>
  <div class="main">
    <my-head title="会员购"></my-head>
    <div class="content">
      <div @click="search">
        <van-search style="margin-top: 10px" placeholder="请输入搜索关键词" />
      </div>

      <div class="nav">
        <ul>
          <li>
            <a href="">
              <img src="@/assets/img2/shouban.png" alt="" />
              <p>手办</p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="@/assets/img2/zhoubian.png" alt="" />
              <p>周边</p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="@/assets/img2/manzhan.png" alt="" />
              <p>漫展</p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="@/assets/img2/zuixin.png" alt="" />
              <p>今日上新</p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="@/assets/img2/niudan.png" alt="" />
              <p>新潮扭蛋</p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="@/assets/img2/youxi.png" alt="" />
              <p>游戏相关</p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="@/assets/img2/tushu.png" alt="" />
              <p>图书漫画</p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="@/assets/img2/quanbu.png" alt="" />
              <p>全部分类</p>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <div class="shop">
      <SList :list="shops"></SList>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shops: [],
    };
  },
  methods: {
    async getgoods() {
      let res = await this.$ajax.getBili({
        network: "",
        build: 0,
        pageNum: 1,
        pageSize: 10,
        mVersion: 7,
        feedType: 0,
      });
      this.shops = res.data.vo.list;
    },
    search() {
      this.$router.push({ name: search });
    },
  },
  mounted() {
    this.getgoods();
  },
};
</script>

<style lang="scss" scoped>
.main {
  background: #f4f4f4;
  height: 100%;
  width: 100%;
}
.nav {
  width: 90%;
  background: #fff;
  border-radius: 15px;
  margin: 10px auto;
  ul {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    li {
      padding: 15px;
      img {
        width: 40px;
        height: 40px;
      }
      p {
        text-align: center;
      }
    }
  }
}
</style>